<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="applicable-device" content="pc,mobile">
		<meta http-equiv="Cache-Control" content="no-transform ">
		<script type="text/javascript" src="js/jquery.js"></script>		
	</head>
	 
	 
	<style>
		body,html{
			width:100%;
			height:100%;
		}
		.left{	
			width: 18%;
			border: 1px red dotted;
			height: 100%;
			border-radius: 0.5em;
			position: fixed;
			float: left;
		}
		.right{				
				border: 1px blue solid;
				position: relative;
				float: right;
				width: 80%;
				border-radius: 0.5em;
				height: 100%;
		}
		#ok,#ok2,#ok3{		
				width: 98%;
				height: 4%;
				border: 1px red solid;
				margin: auto;
				margin-top: 5%;
				text-align: center;
				border-radius: 0.5em;
		}
	</style>
	
	<body>
		<div class="left">
			<div id="ok">世界地图</div>
			<div id="ok2">月球小知识</div>	
			<div id="ok3">中国地图</div>
		</div>
		<div class="right">
		</div>
	</body>
	
	<script>
		$(document).ready(function(){
		  $("#ok").click(function(){
			$(".right").load('world2.html'); 
		  });
		  $("#ok2").click(function(){
			$(".right").load('moon.html'); 
		  });
		  $("#ok3").click(function(){
			$(".right").load('china3.html'); 
		  });
		});
	</script>
</html>